<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css"
	href="UserInterface/css/bootstrap.css" />
<link href="UserInterface/css/example-fluid-layout.css" rel="stylesheet"
	type="text/css" />
	<script type="text/javascript" src="UserInterface/js/jquery.js"></script>
<script type="text/javascript" src="UserInterface/js/bootstrap-dropdown.js"></script>
</head>
<body>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span3">
				<div class="well sidebar-nav">
					<ul class="nav nav-list">
						<li class="nav-header">Frontend</li>
						<li class="active"><a href="#">HTML 4.01</a></li>
						<li><a href="#">HTML5</a></li>
						<li><a href="#">CSS</a></li>
						<li><a href="#">JavaScript</a></li>
						<li><a href="#">Twitter Bootstrap</a></li>
						<li><a href="#">Firebug</a></li>
						<li class="nav-header">Backend</li>
						<li><a href="#">PHP</a></li>
						<li><a href="#">SQL</a></li>
						<li><a href="#">MySQL</a></li>
						<li><a href="#">PostgreSQL</a></li>
						<li><a href="#">MongoDB</a></li>
					</ul>
				</div>
				<!--/.well -->
			</div>
			<!--/span-->
			<div class="span9">
				<div class="leaderboard">
					<h1>Learn. Practice. Develop.</h1>
					<p>w3resource offers web development tutorials. We believe in
						Open Source. Love standards. And prioritize simplicity and
						readability while serving content.</p>
					<p>
						<a class="btn btn-success btn-large">Join w3resource now</a>
					</p>
				</div>
				<div class="row-fluid">
					<div class="span4">
						<h2>Learn</h2>
						<p>Donec id elit non mi porta gravida at eget metus. Fusce
							dapibus, tellus ac cursus commodo, tortor mauris condimentum
							nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
							malesuada magna mollis euismod. Donec sed odio dui.</p>
						<p>
							<a class="btn btn-success btn-large" href="#">Start Learning
								now</a>
						</p>
					</div>
					<!--/span-->
					<div class="span4">
						<h2>Practice</h2>
						<p>Donec id elit non mi porta gravida at eget metus. Fusce
							dapibus, tellus ac cursus commodo, tortor mauris condimentum
							nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
							malesuada magna mollis euismod. Donec sed odio dui.</p>
						<p>
							<a class="btn btn-success btn-large" href="#">Start
								percticing now</a>
						</p>
					</div>
					<!--/span-->
					<div class="span4">
						<h2>Develop</h2>
						<p>Donec id elit non mi porta gravida at eget metus. Fusce
							dapibus, tellus ac cursus commodo, tortor mauris condimentum
							nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
							malesuada magna mollis euismod. Donec sed odio dui.</p>
						<p>
							<a class="btn btn-success btn-large" href="#">Start
								developing now</a>
						</p>
					</div>
					<!--/span-->
				</div>
				<!--/row-->
				<hr>
			</div>
		</div>
	</div>
	<!--/.fluid-container-->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="UserInterface/js/jquery.js"></script>
	<script src="UserInterface/js/bootstrap-transition.js"></script>
	<script src="UserInterface/js/bootstrap-alert.js"></script>
	<script src="UserInterface/js/bootstrap-modal.js"></script>
	<script src="UserInterface/js/bootstrap-dropdown.js"></script>
	<script src="UserInterface/js/bootstrap-scrollspy.js"></script>
	<script src="UserInterface/js/bootstrap-tab.js"></script>
	<script src="UserInterface/js/bootstrap-tooltip.js"></script>
	<script src="UserInterface/js/bootstrap-popover.js"></script>
	<script src="UserInterface/js/bootstrap-button.js"></script>
	<script src="UserInterface/js/bootstrap-collapse.js"></script>
	<script src="UserInterface/js/bootstrap-carousel.js"></script>
	<script src="UserInterface/js/bootstrap-typeahead.js"></script>
</body>
</html>
